<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div>
        Ctrl + Y：
        <input
          type="text"
          placeholder="按下回车提示输入"
          @keydown.ctrl.y="ctrlY"
        />
      </div>
      <div>
        <!-- 无法阻止一些 window 自带的组合键，解决方案，切换按键 -->
        Window + E：
        <input type="text" @keydown.prevent.meta.e="windowAction" />
      </div>
      <div>
        <!-- 无法阻止一些 window 自带的组合键，解决方案，切换按键 -->
        Window + Click：
        <input type="text" @click.meta="windowAction" />
      </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      /*
      系统修饰键（用法特殊）：ctrl、alt、shift、meta
        配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        配合keydown使用：正常触发事件。
      */
      const app = createApp({
        setup() {
          function ctrlY(e) {
            console.log(e.key, e.keyCode);
            console.log(e.target.value);
          }

          function windowAction() {
            console.log("Window + Action");
          }

          return {
            ctrlY,
            windowAction,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
